<template>
  <div class="kjk">
    <a-typography-title :level="4" class="header">
      <img
        src="@/assets/left-s-line.png"
        class="left-s-line"
        @click="handleAvatarClick"
      />
      设置昵称
      <a-typography-text class="sjdkf" @click="handleClick"
        >保存</a-typography-text
      >
    </a-typography-title>

    <van-field v-model="memberName" placeholder="请输入用户名" />
  </div>
</template>
    
<script setup >
import { useRouter, useRoute } from 'vue-router'
import { putSystemMember } from '@/api/api'
import { Toast } from 'vant'
import { useAppStore } from '@/store'
const appStore = useAppStore()
const router = useRouter()
const route = useRoute()
const memberName = ref('')
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
onBeforeMount(() => {
  memberName.value = userInfo?.memberName || ''
})

const handleAvatarClick = () => {
  router.push({ path: '/userCenter' })
}
const handleClick = async (index) => {
  const res = await putSystemMember({
    id: route.query.id,
    memberName: memberName.value,
  })
  if (res.code == 200) {
    userInfo.memberName = memberName.value
    router.push({ path: '/userCenter' })
  } else {
    Toast.fail(res.msg)
  }
}
</script>
    
<style scoped lang='less'>
.kjk {
  .header {
    text-align: center;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #ccc;

    .left-s-line {
      width: 20px;
      position: absolute;
      left: 10px;
      top: 15px;
    }
  }
  .sjdkf {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
</style>